import React, { memo } from "react";
import { Typography, Carousel, Image, Rate, Table } from "antd";
import { ProductInfoContainer } from "./style";
import { ColumnsType } from "antd/es/table";
export interface ProductInfoPropType {
  title: string;
  shortDescription: string;
  price: string | number;
  coupons: string;
  points: string;
  discount: string;
  rating: string | number;
  pictures: string[];
}
interface DataSourceType {
  title: string;
  description: string | JSX.Element | number;
  key: number;
}
const columns: ColumnsType<DataSourceType> = [
  {
    title: "title",
    dataIndex: "title",
    key: "title",
    align: "left",
    width: 120,
  },
  {
    title: "description",
    dataIndex: "description",
    key: "description",
    align: "center",
  },
];
const ProductInfo = memo<ProductInfoPropType>(
  ({
    title,
    shortDescription,
    price,
    coupons,
    points,
    discount,
    rating,
    pictures,
  }) => {
    const dataSource: DataSourceType[] = [
      {
        title: "路线名称",
        key: 0,
        description: title,
      },
      {
        key: 1,
        title: "价格",
        description: (
          <>
            ¥{" "}
            <Typography.Text type="danger" strong>
              {price}
            </Typography.Text>
          </>
        ),
      },
      {
        key: 2,
        title: "限时抢购折扣",
        description: discount ? (
          <>
            ¥ <Typography.Text delete>{price}</Typography.Text>{" "}
            <Typography.Text type="danger" strong>
              ¥ {discount}
            </Typography.Text>
          </>
        ) : (
          "暂无折扣"
        ),
      },
      {
        key: 3,
        title: "领取优惠",
        description: coupons ? discount : "无优惠券可领",
      },
      {
        key: 4,
        title: "线路评价",
        description: (
          <>
            <Rate allowHalf defaultValue={+rating} />
            <Typography.Text style={{ marginLeft: 10 }}>
              {rating} 星
            </Typography.Text>
          </>
        ),
      },
    ];
    return (
      <ProductInfoContainer>
        <div className="intro-container">
          <Typography.Title level={4}>{title}</Typography.Title>
          <Typography.Text>{shortDescription}</Typography.Text>
          <div className="intro-detail-content">
            <Typography.Text style={{ marginLeft: "20px" }}>
              ￥<span className="intro-detail-strong-text">{price}</span>
            </Typography.Text>
            <Typography.Text style={{ marginLeft: "50px" }}>
              <span className="intro-detail-strong-text">{rating}</span>评分
            </Typography.Text>
          </div>
          <Carousel autoplay slidesToShow={3}>
            {pictures.map((item, index) => {
              return <Image src={item} height={150} key={index}></Image>;
            })}
          </Carousel>
          <Table<DataSourceType>
            columns={columns}
            dataSource={dataSource}
            size="small"
            bordered={false}
            pagination={false}
          ></Table>
        </div>
      </ProductInfoContainer>
    );
  },
);

export default ProductInfo;
